import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  View,
} from '@aws-amplify/ui-react';

import { TableDemo } from './demo';
import {
  BasicExample,
  HighlightExample,
  SizeExample,
  SpanExample,
  TableStylePropExample,
  VariationExample,
  TableThemeExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<TableDemo />

## Usage

The `Table` primitive and its various components can be used similiarly to how the
HTML `table`, `tbody`, `td`, `tfoot`, `th`, `thead`, and `tr` elements are used.

<Example>
  <ExampleCode>
    ```tsx file=./examples/BasicExample.tsx

    ````

  </ExampleCode>
</Example>

### Size

Control the cell height and font size of a Table using the `size` prop. Available options are `small`, none (default), and `large`.

<Example>
  <SizeExample />
  <ExampleCode>
    ```tsx file=./examples/SizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Variation

The `variation` prop can be used to make all cells `bordered` or rows `striped`. Note that the `striped` variation doesn't apply to rows in a `TableHead` tag.

<Example>
  <VariationExample />
  <ExampleCode>
    ```tsx file=./examples/VariationExample.tsx

    ```

  </ExampleCode>
</Example>

### Highlight on Hover

The `highlightOnHover` prop can be used to change the background color of table rows upon mouse hover. Note that rows in a `TableHead` tag are not highlighted.

<Example>
  <HighlightExample />
  <ExampleCode>
    ```tsx file=./examples/HighlightExample.tsx

    ```

  </ExampleCode>
</Example>

### TableCell

#### `th` and `td` cells

The `TableCell` is used for all data presented in a table. If a cell is intended to be a heading for a row or column,
it's recommended to set the cell as a `th` element using the `as` property:

<Example>
  ```jsx
  <TableCell as="th">Column Header</TableCell>
  ```
</Example>

By default, the `TableCell` is rendered as a `td` element.

#### Spanning multiple columns or rows

The `TableCell` component can be made to span multiple columns or rows using the `colspan` or `rowspan` properties,
respectively. This is similar to how the HTML native `th` and `td` elements are made to span multiple columns and rows.

<Example>
  <SpanExample />
  <ExampleCode>
    ```tsx file=./examples/SpanExample.tsx

    ```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="Table" element="<table>">
  <Example>
    <Table title="Table">
      <TableHead>
        <TableRow>
          <TableCell as="th">Citrus</TableCell>
          <TableCell as="th">Stone Fruit</TableCell>
          <TableCell as="th">Berry</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Orange</TableCell>
          <TableCell>Nectarine</TableCell>
          <TableCell>Raspberry</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Grapefruit</TableCell>
          <TableCell>Apricot</TableCell>
          <TableCell>Blueberry</TableCell>
        </TableRow>
      </TableBody>
    </Table>

    <ExampleCode>

    ```jsx
    <Table title="Table">
      <TableHead>
        <TableRow>
          <TableCell as="th">Citrus</TableCell>
          <TableCell as="th">Stone Fruit</TableCell>
          <TableCell as="th">Berry</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Orange</TableCell>
          <TableCell>Nectarine</TableCell>
          <TableCell>Raspberry</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Grapefruit</TableCell>
          <TableCell>Apricot</TableCell>
          <TableCell>Blueberry</TableCell>
        </TableRow>
      </TableBody>
    </Table>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="Table">
  <Example>
    <TableThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TableThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Table" />

### Global Styling

Each component related to the `Table` primitive has its own class name which
may be used to override styling with custom CSS.

<Example>
  <View>
    <Table
      className="global-styling-table"
      caption={
        <>
          Table Title
          <br />
          <span class="table-summary">A short table description</span>
        </>
      }
    >
      <TableBody>
        <TableRow>
          <TableCell as="th" />
          <TableCell as="th">A</TableCell>
          <TableCell as="th">B</TableCell>
          <TableCell as="th">C</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">1</TableCell>
          <TableCell>A1</TableCell>
          <TableCell>B1</TableCell>
          <TableCell>C1</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">2</TableCell>
          <TableCell>A2</TableCell>
          <TableCell>B2</TableCell>
          <TableCell>C2</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">3</TableCell>
          <TableCell>A3</TableCell>
          <TableCell>B3</TableCell>
          <TableCell>C3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </View>

  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-table__th {
      background-color: var(--amplify-colors-background-tertiary);
    }

    .amplify-table__th:first-child {
      text-align: right;
    }

    .amplify-table__row:not(:first-child) .amplify-table__th {
      border-top: none;
    }

    .amplify-table__row:not(:last-child) .amplify-table__th {
      border-bottom: none;
    }

    .amplify-table__caption {
      caption-side: top;
      text-align: right;
    }

    .table-summary {
      color: var(--amplify-colors-font-secondary);
      font-style: italic;
    }
    ```

  </ExampleCode>

  <ExampleCode>
    ```jsx
    import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';
    import '@aws-amplify/ui-react/styles.css';

    import './styles.css';

    <Table
      className="global-styling-table"
      caption={
        <>
          Table Title
          <br />
          <span class="table-summary">A short table description</span>
        </>
      }
    >
      <TableBody>
        <TableRow>
          <TableCell as="th" />
          <TableCell as="th">A</TableCell>
          <TableCell as="th">B</TableCell>
          <TableCell as="th">C</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">1</TableCell>
          <TableCell>A1</TableCell>
          <TableCell>B1</TableCell>
          <TableCell>C1</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">2</TableCell>
          <TableCell>A2</TableCell>
          <TableCell>B2</TableCell>
          <TableCell>C2</TableCell>
        </TableRow>
        <TableRow>
          <TableCell as="th">3</TableCell>
          <TableCell>A3</TableCell>
          <TableCell>B3</TableCell>
          <TableCell>C3</TableCell>
        </TableRow>
      </TableBody>
    </Table>;
    ```

  </ExampleCode>
</Example>

### Local Styling

To override styling on a specific `Table` components, you can use (in order of increasing specificity): a class
selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <View>
    <Table className="my-custom-table">
      <TableBody>
        <TableRow>
          <TableCell>Smaller Text</TableCell>
          <TableCell>Smaller Text</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </View>
  <ExampleCode>
    ```css
    /* styles.css */
    .my-custom-table .amplify-table__td {
      font-size: var(--amplify-font-sizes-xs);
    }

    .my-custom-table .amplify-table__row {
      background-color: var(--amplify-colors-neutral-60);
    }
    ```

  </ExampleCode>

  <ExampleCode>
    ```jsx
    import './styles.css';

    <Table className="my-custom-table">
      <TableBody>
        <TableRow>
          <TableCell>Smaller Text</TableCell>
          <TableCell>Smaller Text</TableCell>
        </TableRow>
      </TableBody>
    </Table>;
    ```

  </ExampleCode>
</Example>

_Using data attributes:_

<Example>
  <View>
    <Table className="custom-data-styling" size="large">
      <TableBody>
        <TableRow>
          <TableCell>Larger Text</TableCell>
          <TableCell>Larger Text</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </View>
  
  <ExampleCode>
    ```css
    /* styles.css */
    /* Override only large size styles */
    .amplify-table[data-size='large'] .amplify-table__td {
      font-size: var(--amplify-font-sizes-xxxl);
    }
    ```
  </ExampleCode>

  <ExampleCode>
    ```jsx
    import './styles.css';

    <Table size="large">
      <TableBody>
        <TableRow>
          <TableCell>Larger Text</TableCell>
          <TableCell>Larger Text</TableCell>
        </TableRow>
      </TableBody>
    </Table>;
    ```

  </ExampleCode>

</Example>

_Using style props:_

<Example>
  <TableStylePropExample />

  <ExampleCode>
    ```jsx file=./examples/TableStylePropExample.tsx

    ```

  </ExampleCode>
    /* OR */
  <ExampleCode>
    ```jsx file=./examples/TableFontSizePropExample.tsx

    ```

  </ExampleCode>
</Example>